<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="企业logo" prop="logo">
          <image-upload v-model="form.logo"/>
        </el-form-item>
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="form.contacts" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码" />
          <div style="color: #778899;font-size: 14px;">需是微信绑定的手机号码</div>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="usci">
          <el-input v-model="form.usci" placeholder="请输入统一社会信用代码" />
        </el-form-item>
        <el-form-item label="所属地区" prop="region">
          <el-cascader
            v-model="form.region"
            placeholder="请选择"
            style="width: 100%;"
            :options="cityOptions"
            :props="{ checkStrictly: true, label: 'cityName', value: 'cityName', children: 'citys' }"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-select v-model="form.industry" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in industryList"
              :key="item.id"
              :label="item.sectorName"
              :value="item.sectorName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-col :span="24" style="text-align: center;margin-top: 50px;">
        <el-button type="primary" @click="submitForm">保存提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sectorList } from "@/api/system/enterpriseInfo";
import { getMyEnterpriseInfo, updateEnterpriseInfo } from "@/api/system/enterpriseInfo";
import citys from '../../../utils/citys.json'

export default {
  name: "EnterpriseInfo",
  data() {
    return {
      cityOptions: citys.provinces,
      industryList: [],
      // 企业信息管理表格数据
      enterpriseInfoList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        enterpriseName: [
          { required: true, trigger: "blur", message: "请输入企业名称" }
        ],
        contacts: [
          { required: true, trigger: "blur", message: "请输入联系人" }
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入手机号码" }
        ],
        usci: [
          { required: true, trigger: "blur", message: "请输入统一社会信用代码" }
        ],
      }
    };
  },
  created() {
  this.getSectorList()
    getMyEnterpriseInfo().then(res => {
      this.form = res.data
      if(this.form.region) {
        this.form.region = res.data.region.split("-");
      }
    })
  },
  methods: {
    getSectorList() {
      sectorList({}).then(res => {
        this.industryList = res.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let region = ''
          if(this.form.region) {
            region = this.form.region.join('-')
          }
          updateEnterpriseInfo({...this.form, region}).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
  }
};
</script>
